/**
 * resistor-form.js
 * A collection of components for managing form-fields.  includes a base-class RMoo.form.Field
 * @author Chris Scott
 * @copyright Resistor Software <www.resistorsoftware.com>
 */

/**
 * @namespace
 */
RMoo.form = {};

/***
 * @class RMoo.form.Field
 * @extends RMoo.Component
 * A base-class for form-fields.
 * @author Chris Scott
 */
RMoo.form.Field = RMoo.Component.extend({
    // options
    options: {
        tag : 'input',
        fieldLabel : '',
        labelAlign: 'left',
        hideLabel : false,
        element : {
            type : 'text'
        }
    },

    // initComponent
    initComponent : function() {
        if (typeof(this.options.renderTo) != 'undefined') {
            this.options.renderTo.adopt(this.render());
        }
    },

    /**
     * render
     * @return {Element}
     */
    render : function() {
        //return this.el = new Element(this.options.tag, this.options.element);
        var el = new Element(this.options.tag, this.options.element);

        var label = new Element('span', {"class" : 'r-form-field-label'});
        label.setText(this.options.fieldLabel);

        var ct = new Element('div', {"class" : 'r-form-field'});
        if (this.options.hideLabel == true) {
            ct.adopt(el);
        }
        else if (this.options.labelAlign == 'left' || this.options.labelAlign == 'top') {
            ct.adopt(label);
            ct.adopt(el);
        }
        else {
            ct.adopt(el);
            ct.adopt(label);
        }
        this.el = ct;
        return ct;
    },

    /**
     * getEl
     * @return {Element}
     */
    getEl: function(){
        return this.el;
    },

    /**
     * getF
     * get form-field.  returns the <input /> el
     * @return {Element}
     */
    getF : function() {
        return this.el.getElement(this.options.tag);
    },

    /**
     * getValue
     * returns the form-fields value from underlying field el.
     * @return {Mixed}
     */
    getValue : function() {
        return this.el.getElement(this.options.tag).getValue();
    },

    /**
     * setValue
     * sets the underlying field Element's value.  fires changes if different.
     * @param {Object} v
     */
    setValue : function(v) {
        var f = this.el.getElement(this.options.tag);
        var oldv = f.getValue();
        f.setProperty('value', v);
        if (oldv != v) {
            f.fireEvent('change', {});
        }
    }

});

/**
 * RMoo.form.ComboBox
 * @extends RMoo.form.Field
 *
 */
RMoo.form.ComboBox = RMoo.form.Field.extend({

    options : {
        tag: 'select',
        element : {},
        items : []
    },

    render : function() {
        var el = this.parent();
        this.load(this.options.items);
        return el;
    },

    /**
     * load
     * loads the Combo with items.  automates task of rendering <option> els to <select>
     * The incoming array of elements is assumed to be either an array of Scalars (['US', 'CA']) or an array of hashes having
     * "name" / "value" keys, eg: [{name: "United States", value: "US"}].  a bit limiting currently, I know, I know...
     * but where does a guy stop?  I can't keep going or I'll re-invent ExtJS
     * @param {Array} items
     */
    load : function(items) {
        var f = this.el.getElement('select');
        f.empty();
        for (var n=0,len=items.length;n<len;n++) {
            var name = '';
            var value = '';
            var type = typeof(items[n]);
            switch (type) {
                case 'object':
                    name = items[n].name;
                    value = items[n].value;
                    break;
                case 'string':
                    name = items[n];
                    value = name;
            }
            new Element('option', {
                value: value
            }).injectInside(f).setText(name);
        }
    }
});